<template>
  <div class="container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div style="margin-left: 20px">
      <el-input
        v-model="Sydw"
        class="form-input"
        style="width: 300px"
        disabled
      ></el-input>
      <el-input
        v-model="Equ"
        class="form-input"
        style="width: 250px"
        disabled
      ></el-input>
    </div>
    <div class="row">
      <el-select v-model="value" style="margin-right: 10px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="btns" v-if="value == '基本分析'">
        <div class="btn blue">应力数据分析</div>
        <div class="btn">振动数据分析</div>
        <div class="btn">制动数据分析</div>
      </div>
      <div class="btns" v-if="value == '健康诊断'">
        <div class="btn blue">结构健康诊断</div>
        <div class="btn">减速机健康诊断</div>
        <div class="btn">制动器健康诊断</div>
      </div>
      <div class="btns" v-if="value == '损伤预测'">
        <div class="btn blue">结构损伤预测</div>
        <div class="btn">减速机故障预测</div>
        <div class="btn">制动器故障预测</div>
      </div>
      <div class="btns" v-if="value == '预知维修'">
        <div class="btn blue">结构预知维修</div>
        <div class="btn">减速机预知维修</div>
        <div class="btn">制动器预知维修</div>
      </div>
    </div>
    <div class="content" style="width: 100%">
      <component-a v-if="value == '基本分析'"></component-a>
      <c-b v-if="value == '健康诊断'" style="margin-top: 40px"></c-b>
      <c-c v-if="value == '损伤预测'" style="margin-top: 40px"></c-c>
      <c-d v-if="value == '预知维修'" style="margin-top: 40px"></c-d>
    </div>
  </div>
</template>
<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import componentA from "../modulePredict/index.vue";
import cB from "./c-b.vue";
import cC from "./c-c.vue";
import cD from "./c-d.vue";
export default {
  components: { Breadcrumb, componentA, cB, cC, cD },
  data() {
    return {
      naviItems: [
        { text: "起重机械" },
        { text: "数据引擎" },
        { text: "监测数据" },
      ],
      EquValue: "一钢轧 008",
      SydwValue: "马鞍山钢铁股份有限公司",
      value: "基本分析",
      options: [
        {
          label: "基本分析",
          value: "基本分析",
        },
        {
          label: "健康诊断",
          value: "健康诊断",
        },
        {
          label: "损伤预测",
          value: "损伤预测",
        },
        {
          label: "预知维修",
          value: "预知维修",
        },
      ],
    };
  },
  computed: {
    Equ() {
      return "设备编号：" + this.EquValue;
    },
    Sydw() {
      return "使用单位：" + this.SydwValue;
    },
  },
  created() {},

  methods: {},
};
</script>
<style lang="less" scoped>
div.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.row {
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    div.btns {
      display: flex;
      flex-direction: row;
      div.btn {
        margin-left: 10px;
        margin-right: 10px;
        border: 3px solid #595959;
        color: #595959;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        border-radius: 6px;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 500;
        &:hover {
          border-color: #0070c0;
          color: #0070c0;
          cursor: pointer;
        }
      }
      div.blue {
        border-color: #0070c0;
        color: #0070c0;
      }
    }
  }
}
.form-input /deep/ .el-input__inner {
  color: rgb(0, 0, 0) !important;
}
</style>
